/* components/chat/chat.wxss */
@import "/assets/iconfont/iconfont.wxss";
@import "/assets/common.less";
.chat-page{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 100;
  top:0;
  left:0;
  //background: linear-gradient(179.97deg, rgba(113, 203, 255, 0.15) 0.03%, rgba(255, 255, 255, 0.15) 70.05%, rgba(255, 54, 48, 0.15) 115.9%);
}
.answer-content{
  position: relative;
  width: 90%;
  margin: auto;
  max-height: calc(100% - 300rpx);
  display: flex;
  flex-direction: column-reverse;
  overflow-y: auto;
  padding: 0 20rpx;
  padding-bottom: 20rpx;
  box-sizing: border-box;
}
.template-menu-wrapper{
  position: absolute;
  left: 32rpx;
  z-index: 99;
  &.no-files{
    bottom: 220rpx;
  }
  &.has-files{
    bottom: 300rpx;
  }
  .template-menu-btn{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 200rpx;
    height: 64rpx;
    padding: 0 16rpx;
    background: #F3FBFF;
    border: 1rpx solid #ACACAC;
    border-radius: 24rpx;
    font-size: 28rpx;
    color: #5C83E7;
    ;
    box-sizing: border-box;
    .arrow-icon{
      font-size: 24rpx;
      transition: transform 0.3s;
      display: inline-block;
      color:#5C83E7;
      &.rotate{
        transform: rotate(90deg);
      }
    }
  }
  .template-menu-options{
    margin-top: 12rpx;
    background: #fff;
    border: 1rpx solid #71CBFF;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
    .template-option{
      display: flex;
      align-items: center;
      padding: 24rpx;
      font-size: 28rpx;
      color: #333;
      border-bottom: 1rpx solid #f3f3f3;
      &:last-child{
        border-bottom: none;
      }
      &:active{
        background: #f5f5f5;
      }
      .circle{
        width: 38rpx;
        height: 38rpx;
        border-radius: 38rpx;
        margin-right: 10rpx;
        flex-shrink: 0;
        &.circle-keyword{
          background: #FF3630;
        }
        &.circle-title{
          background: #FFB24E;
        }
        &.circle-doi{
          background: #FFB24E;
        }
      }
    }
  }
}
.input-box{
  position: absolute;
  bottom: 0rpx;
  padding-bottom: 20rpx;
  width: 94%;
  left: 3%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .uploaded-files{
    height: 80rpx;
    margin-bottom: 6rpx;
    padding: 17rpx 12rpx;
    background: transparent;
    border-radius: 16rpx;
    box-sizing: border-box;
    z-index: 1;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 18rpx;
    .file-item{
      display: flex;
      align-items: center;
      background: #FFFFFF;
      border: 1rpx solid #71CBFF;
      border-radius: 12rpx;
      width: 103rpx;
      height: 46rpx;
      padding: 0;
      margin: 0;
      margin-right: 12rpx;
      box-sizing: border-box;
      position: relative;
      justify-content: center;
      flex-shrink: 0;
      .file-thumb{
        width: 32rpx;
        height: 32rpx;
        border-radius: 6rpx;
        background: #5C83E7;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18rpx;
        text-transform: uppercase;
        flex-shrink: 0;
      }
      .file-info{
        display: none;
      }
      .remove-file{
        position: absolute;
        top: -8rpx;
        right: -8rpx;
        font-size: 24rpx;
        color: #f36754;
        width: 32rpx;
        height: 32rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 50%;
        z-index: 10;
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
      }
    }
    .file-item:last-child{
      margin-right: 0;
    }
  }
  .input-content{
    position: relative;
    padding: 20rpx 100rpx 80rpx 20rpx;
    width: 100%;
    height: 180rpx;
    border: 1rpx solid #71CBFF;
    border-radius: 16rpx;
    box-sizing: border-box;
    background: #fff;
    display: flex;
    flex-direction: column;
    .condition-box{
      margin-bottom: 16rpx;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .select-btn+.select-btn{
        margin-left: 10rpx;
      }
    }
    .input-textarea{
      width: 100%;
      flex: 1;
      min-height: 120rpx;
      font-size: 12px;
      margin-bottom: 16rpx;
    }
    .input-actions{
      position: absolute;
      left: 20rpx;
      bottom: 18rpx;
      display: flex;
      align-items: center;
      .upload-btn{
        display: inline-flex;
        align-items: center;
        font-size: 24rpx;
        color: #5C83E7;
        .iconfont{
          font-size: 30rpx;
          margin-right: 8rpx;
        }
      }
    }
  }
  .upload-file-btn{
    position: absolute;
    z-index: 10;
    right: 100rpx;
    bottom: 10rpx;
    width: 64rpx;
    height: 64rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    pointer-events: auto;
    &::after{
      border: none;
    }
    .upload-icon{
      width: 40rpx;
      height: 40rpx;
      pointer-events: none;
    }
  }
  .send-btn{
    position: absolute;
    z-index: 1;
    right: 20rpx;
    bottom: 10rpx;
    width: 64rpx;
    height: 64rpx;
    border-radius: 64rpx;
    background: #5C83E7;
    display: flex;
    align-items: center;
    justify-content: center;
    .iconfont{
      color: #fff;
    }
    &.disabled{
      background: #ACACAC;
      color: #777777;
      .iconfont{
        color: #f4f4f4;
      }
    }
  }
  .pause-btn{
    background: #f36754;
  }
  .loading-box{
    //height: 184rpx;
    border-radius: 16rpx;
    z-index: 2;
  }
}
